<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生成缺陷</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../../css/preview.css" />
    <style>
      /* .mui-content>.mui-table-view:first-child {
          margin-top: 1px;
      } */
      /* .icon{
        width: 35px;
        vertical-align: middle;
        margin-right: 10px;
      } */
      /* .mui-table-view-cell:after {
          left: 45px;
          height: 1px;
      } */
      /* .mui-table-view-cell{
        padding: 11px 11px 11px 11px;
      } */
      /* .mui-table-view:after {
          left: 45px;
      } */
	  /* .mui-bar{
		  background-color: #0082E6;
	  } */
    .uls{
      padding: 30px 20px;
      list-style: none;
      margin: 0;
    }
    
    .mui-table-view:after{
      height: 0;
    }
    .titles{
      /* font-weight: bold; */
      margin-bottom:24px;
    }
     
    .img_s{
      float: left;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      background-color: #0082E6;
      border-radius: 100%;
      /* background: url(../img/word.png) no-repeat; */
      /* background-size: 100%; */
      margin: auto 0;
    }
    .bocks{
      padding: 0 5px;
    }
    .areas{
      background-color: ##F5F6F7;
      border: solid 1px #DCDCDC;
    }
     .signs{
       display: inline-block;
       width: 160px;
       height: 160px;
       border: solid 1px #3188FE;
       border-radius: 5px;
       margin-right: 10px;
       margin-bottom: 10px;
       overflow: hidden;
       position: relative;
       /* background-color: #D4E6FF; */
     }
    .signs img{
      width: 100%;
    }
     .uploads{
       display: inline-block;
       width: 160px;
       height: 160px;
       /* border-radius: 5px; */
       background: url(../img/task/dianjipaizhao.png) no-repeat;
       background-size: 100%;
       margin-bottom: 20px;
     }
     .signs .action-delete {
     	position: absolute;
     	left: 0;
     	right: 0;
     	bottom: 0;
     	background-color: rgba(0, 0, 0, 0.5);
     	text-align: center;
     }
     .action-delete .mui-icon {
     	color: #FFFFFF;
     }
     .submits{
       width: 100%;
       margin-top: 30px;
       height: 4 0px;
       border-radius: 30px;
     }
     /* .fixed-btn .mui-btn{
       width: 30%;
     } */
     
    </style>
	</head>
	<body>
    <div id="container"> 
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
        <h1 class="mui-title">生成缺陷</h1>
    </header>
    <div class="mui-content page-wrap">
      <ul class="uls page-scroll">
         <li class="lis">
           <div>
             <textarea name="" class="areas" v-model="faultInfo.remarks" cols="30" rows="3" placeholder="请输入"></textarea>
           </div>
            <div id="sign">
               <div v-if="faultInfo.files" class="imgss">
                 <span class="signs" v-for="(v,i) in faultInfo.files">
                   <img :src="v.path|| (baseUrl + v.filePath)"  :data-preview-src="v.path|| (baseUrl + v.filePath)" :data-preview-group="1"/>
                    <div class="action-delete" @tap="deleteImg(v, i)">
                    	<span class="mui-icon mui-icon-trash"></span>
                    </div>
                 </span>
               </div>
              <span class="uploads" id="headImage" @tap="addPic(2)"></span>
            </div>
           <!-- <textarea name="" class="areas" cols="30" rows="6"></textarea>
           <div id="sign">
              <span class="signs"></span>
             <span class="uploads"></span>
           </div> -->
         </li>
      </ul>
       <div class="fixed-btn">
        <button type="button" class="mui-btn mui-btn-primary" @tap="submits">提交缺陷</button>
      </div>
    </div>
    </div>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/uploadImage.js"></script>
    <script src="../../../js/mui.zoom.js"></script>
    <script src="../../../js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/indexDBs.js"></script>
    <script type="text/javascript">
      mui.init()
      mui.previewImage()
      let lineType =null;
      let db={};
      const dbName = 'myDBs'; // 数据库的名字
      const storeName = 'listPackage'; //仓库名称
      let self=null
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }
      
     async function plusready() {
        self = plus.webview.currentWebview();
        console.log(self.projectId)
        vm.ids = self.projectId
        // vm.form.projectCategory = self.projectCategory
        vm.faultInfo = self.faultInfo?self.faultInfo:{remarks:'',files:[]}
        vm.lineType= getSysInfo();
        lineType = getSysInfo();
        // 打开数据库 const dbName = 'myDB', storeName = 'processPackage'
        await openDB(dbName, storeName, 2).then(res=>{
          console.log('openDB',res) 
          db=res;
        })
        //是否离线
        if(!lineType){
          // getLineData()
        } 
        // vm.getDetail()''
      }
      var vm = new Vue({
            el: '#container',
            data: {
              ids:'',
              faultInfo: {
                remarks:'',
                files:[]
              },
              baseUrl: mui.baseApp.serverUrl,
              lineType:null,
            },
            created: function() {
            },
            methods: {
              formatDate(tmp, fmt) {
                return mui.baseApp.formatDate(tmp,fmt)
              },
              getWpTag(){
                mui.baseApp.httpRequst("post", "/app/sys/dictItem/getDictDetail", {
                  dictName:'wpTag'
                }, function(data) {
                  console.log('数据列表wpTag',data)
                  this.wpTagList=data.data
                }, function() {
                  // plus.nativeUI.closeWaiting()
                  console.log("获取数据失败");
                })
              },
              submits(){
                if(!this.faultInfo.remarks) {
                  mui.toast('请输入缺陷内容');
                  return
                }
                if(!this.faultInfo.files.length) {
                  mui.toast('请上传缺陷图片');
                  return
                }
                mui.fire(self.opener(), 'faultInfo', {
                  faultInfo: this.faultInfo
                })
                mui.back()
                 
              },
              toDetail(item) {
      //          projectCategory  项目分类，0:常规项目 1:单任务项目
                mui.baseApp.openWindow('./workingCode.html',{projectTaskId: item.id,tagId:item.tagId, projectCategory:1})
              },
               // 添加图片
               addPic(index) {
                var that = this;
                vm.lineType= getSysInfo();
                lineType = getSysInfo();
                page.imgUp(function(path) {
                  console.log('compress image path: ' + path)
                   plus.nativeUI.showWaiting('上传中')
                   if(!lineType){
                     that.faultInfo.files.push({
                       path: path,
                       // fileId: res.data.id,
                       filePath: path
                     })
                     plus.nativeUI.closeWaiting()
                     return
                   }
                   mui.baseApp.upLoadFile(path, function(res) {
                     console.log(res,'0000')
                     plus.nativeUI.closeWaiting()
                     mui.toast("上传成功")
                      
                     if(index==2){
                       that.faultInfo.files.push({
                         path: path,
                         fileId: res.data.id,
                         filePath: res.data.fileDirectory
                       })
                     }
                   })
                });
               },
              // 删除图片
              deleteImg(item, i) {
                var that = this;
                mui.confirm('确定要删除此图片吗？', '提示', ['取消', '确认'], function (e) {
                  console.log(e.index)
                  if (e.index === 1) { // 确认
                  that.faultInfo.files.splice(i,1)
                    // var images = that.checkDetails[index].images;
                    // images.splice(i, 1);
                    // that.$set(that.checkDetails[index], 'images', images);
                  } else {
                    console.log('取消删除')
                  }
                }, 'div');
              },
               
            }
        });
      function getSysInfo() {
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
       
      }
    	$(document).ready(function() {
    	  let height = document.documentElement.clientHeight
    	  //防止软键盘弹出底部按钮顶上来
    	  $(".mui-content").css('height', height + 'px')
    	})
    	$("#sign").click(function() {
    	  // mui.baseApp.openWindow('../common/sign.html')
    	}) 
    </script>
	</body>
</html>

